import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Card, Row, Col } from 'antd';
import React from 'react';
import { ProFormText, LoginForm } from '@ant-design/pro-form';
import { history, useModel } from 'umi';
import { login, saveToken } from '@/services/user';
import styles from './index.less';
import { getBankName, getImgName, getAppFullName } from '@/utils/common';

const Login: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const { updateSysInfo } = useModel('sysInfo');
  const fetchSysInfo = async (pwd: string) => {
    const info = await initialState?.fetchSysInfo?.();
    if (info) {
      await setInitialState((s) => ({
        ...s,
        user: info.userInfo,
        sys: info.sysInfo,
        isInitPwd: pwd === '00000000',
      }));
      updateSysInfo(info.sysInfo);
    }
  };
  const handleSubmit = async (values: API.LoginParams) => {
    try {
      // 登录
      const data = await login(values);
      if (data == undefined) {
        history.push('/403');
      }
      const token = data.token;
      if (token !== undefined) {
        localStorage.clear();
        saveToken(token);
        await fetchSysInfo(values.password);
        /** 此方法会跳转到 redirect 参数所在的位置 */
        if (!history) return;
        const { query } = history.location;
        const { redirect } = query as { redirect: string };
        history.push(redirect || '/');
        return;
      }
    } catch (error) {
      console.log(error);
    }
  };
  const height = 360;
  const width = 400;
  const cardTitle = (
    <span>
      <span style={{ fontSize: 24, verticalAlign: 'middle' }}>
        <img alt="logo" src={'/loginright.gif'} style={{ width: '128px', height: '40px' }} />
      </span>
    </span>
  );
  if (!initialState) {
    return <></>;
  }
  const appNo = initialState!.appNo!;
  const sysName = getBankName(appNo, true);
  const imgName = getImgName(appNo);
  const appName = getAppFullName(appNo);
  return (
    <div className={styles.container} style={{ backgroundImage: `url("/${imgName}")` }}>
      <div style={{ position: 'absolute', left: '20%', top: '20%', width: 900, height: 480 }}>
        <Row>
          <Col span={14}>
            <div title="欢迎使用" className={styles.nameContent}>
              <p style={{ color: 'white', fontSize: 36, marginLeft: 30, marginBottom: 60 }}>
                <img alt="logo" style={{ width: '40px', height: '40px' }} src={'/logo5.png'} />
                <span style={{ marginLeft: 10 }}>欢迎使用</span>
              </p>
              <p
                style={{
                  color: 'white',
                  fontSize: 48,
                  marginLeft: 30,
                  marginBottom: 30,
                  fontWeight: 'bold',
                }}
              >
                {sysName}
              </p>
              <p style={{ color: 'white', fontSize: 36, marginLeft: 30 }}>{appName}</p>
            </div>
          </Col>
          <Col span={10}>
            <Card title={cardTitle} bordered style={{ width: width, height: height }}>
              <LoginForm
                onFinish={async (values) => {
                  handleSubmit(values as API.LoginParams);
                }}
              >
                <ProFormText
                  name="username"
                  fieldProps={{
                    size: 'large',
                    prefix: <UserOutlined className={styles.prefixIcon} />,
                  }}
                  placeholder="请输入员工号..."
                  rules={[
                    {
                      required: true,
                      message: '请输入员工号!',
                    },
                  ]}
                />
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={styles.prefixIcon} />,
                  }}
                  placeholder="请输入密码..."
                  rules={[
                    {
                      required: true,
                      message: '请输入密码！',
                    },
                  ]}
                />
              </LoginForm>
              <p style={{ marginLeft: 10 }}>请使用易点办公访问</p>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default Login;
